<template>
  <view 
    class="trust-touch-card" 
    :class="cardClasses"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    @touchcancel="handleTouchCancel"
  >
    <!-- 卡牌背景 -->
    <view class="card-background">
      <view class="background-pattern" :class="trustLevel"></view>
    </view>
    
    <!-- 触控反馈层 -->
    <view class="touch-feedback-layer">
      <!-- 轻触提示 -->
      <view class="touch-hint" v-if="showTouchHint" :style="touchHintStyle">
        <text class="hint-text">{{ getTouchHintText() }}</text>
      </view>
      
      <!-- 长按预览 -->
      <view class="long-press-preview" v-if="showLongPressPreview" :style="previewStyle">
        <view class="preview-content">
          <text class="preview-title">信任预览</text>
          <view class="preview-effects">
            <view 
              class="preview-effect" 
              v-for="effect in previewEffects" 
              :key="effect.id"
            >
              <text class="effect-icon">{{ effect.icon }}</text>
              <text class="effect-text">{{ effect.name }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 滑动指示器 -->
      <view class="swipe-indicator" v-if="showSwipeIndicator" :style="swipeIndicatorStyle">
        <text class="swipe-text">{{ getSwipeText() }}</text>
        <view class="swipe-arrow">{{ getSwipeArrow() }}</view>
      </view>
    </view>
    
    <!-- 卡牌内容 -->
    <view class="card-content">
      <!-- 卡牌头部 -->
      <view class="card-header">
        <text class="card-icon">{{ cardData.icon }}</text>
        <text class="card-name">{{ cardData.name }}</text>
        <view class="trust-badge" :class="trustLevel">
          <text class="badge-text">{{ getTrustLevelText() }}</text>
        </view>
      </view>
      
      <!-- 信任进度条 -->
      <view class="trust-progress">
        <view class="progress-label">
          <text class="label-text">信任值</text>
          <text class="value-text">{{ trustValue }}/100</text>
        </view>
        <view class="progress-bar">
          <view 
            class="progress-fill" 
            :style="{ width: trustValue + '%' }"
            :class="trustLevel"
          ></view>
        </view>
      </view>
      
      <!-- 信任效果 -->
      <view class="trust-effects" v-if="trustEffects.length > 0">
        <view 
          class="effect-item" 
          v-for="effect in trustEffects" 
          :key="effect.id"
          :class="{ active: effect.active }"
        >
          <text class="effect-icon">{{ effect.icon }}</text>
          <text class="effect-text">{{ effect.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 触控操作区域 -->
    <view class="touch-actions" v-if="showTouchActions">
      <view class="action-buttons">
        <button 
          class="action-btn trust" 
          :class="{ active: selectedAction === 'trust' }"
          @click="selectAction('trust')"
        >
          <text class="btn-icon">🤝</text>
          <text class="btn-text">信任</text>
        </button>
        
        <button 
          class="action-btn betray" 
          :class="{ active: selectedAction === 'betray' }"
          @click="selectAction('betray')"
        >
          <text class="btn-icon">⚠️</text>
          <text class="btn-text">背叛</text>
        </button>
        
        <button 
          class="action-btn repair" 
          :class="{ active: selectedAction === 'repair' }"
          @click="selectAction('repair')"
        >
          <text class="btn-icon">🔧</text>
          <text class="btn-text">修复</text>
        </button>
      </view>
    </view>
    
    <!-- 触控反馈效果 -->
    <view class="touch-effects">
      <!-- 点击波纹 -->
      <view class="ripple-effect" v-if="showRipple" :style="rippleStyle"></view>
      
      <!-- 长按效果 -->
      <view class="long-press-effect" v-if="showLongPressEffect" :style="longPressStyle"></view>
      
      <!-- 滑动效果 -->
      <view class="swipe-effect" v-if="showSwipeEffect" :style="swipeEffectStyle"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TrustTouchCard',
  props: {
    cardData: {
      type: Object,
      required: true
    },
    trustValue: {
      type: Number,
      default: 50
    },
    enableTouchFeedback: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      // 触控状态
      touchStartTime: 0,
      touchStartPos: { x: 0, y: 0 },
      touchCurrentPos: { x: 0, y: 0 },
      isTouching: false,
      isLongPressing: false,
      isSwiping: false,
      
      // 触控反馈
      showTouchHint: false,
      showLongPressPreview: false,
      showSwipeIndicator: false,
      showTouchActions: false,
      showRipple: false,
      showLongPressEffect: false,
      showSwipeEffect: false,
      
      // 触控样式
      touchHintStyle: {},
      previewStyle: {},
      swipeIndicatorStyle: {},
      rippleStyle: {},
      longPressStyle: {},
      swipeEffectStyle: {},
      
      // 操作状态
      selectedAction: null,
      swipeDirection: null,
      
      // 触控配置
      longPressThreshold: 1000, // 长按阈值（毫秒）
      swipeThreshold: 50, // 滑动阈值（像素）
      touchHintDelay: 500 // 触控提示延迟（毫秒）
    }
  },
  
  computed: {
    trustLevel() {
      if (this.trustValue >= 80) return 'high'
      if (this.trustValue >= 50) return 'medium'
      if (this.trustValue >= 20) return 'low'
      return 'broken'
    },
    
    cardClasses() {
      return [
        'trust-touch-card',
        `trust-${this.trustLevel}`,
        `card-${this.cardData.type}`,
        {
          'touching': this.isTouching,
          'long-pressing': this.isLongPressing,
          'swiping': this.isSwiping,
          'touch-feedback': this.enableTouchFeedback
        }
      ]
    },
    
    trustEffects() {
      const effects = []
      
      if (this.trustValue >= 80) {
        effects.push({
          id: 'perfect_trust',
          name: '完美信任',
          icon: '💎',
          active: true
        })
      }
      
      if (this.trustValue >= 60) {
        effects.push({
          id: 'cooperation_boost',
          name: '协作加成',
          icon: '🤝',
          active: true
        })
      }
      
      if (this.trustValue <= 20) {
        effects.push({
          id: 'suspicion',
          name: '怀疑状态',
          icon: '⚠️',
          active: true
        })
      }
      
      return effects
    },
    
    previewEffects() {
      // 根据当前信任值预测可能的信任效果
      const effects = []
      
      if (this.trustValue >= 60) {
        effects.push({
          id: 'cooperation',
          name: '协作效果',
          icon: '🤝'
        })
      }
      
      if (this.trustValue >= 80) {
        effects.push({
          id: 'perfect_trust',
          name: '完美信任',
          icon: '💎'
        })
      }
      
      return effects
    }
  },
  
  methods: {
    // 触控开始
    handleTouchStart(event) {
      if (!this.enableTouchFeedback) return
      
      const touch = event.touches[0]
      this.touchStartTime = Date.now()
      this.touchStartPos = { x: touch.clientX, y: touch.clientY }
      this.touchCurrentPos = { x: touch.clientX, y: touch.clientY }
      this.isTouching = true
      
      // 显示触控提示
      this.showTouchHint = true
      this.touchHintStyle = {
        left: touch.clientX + 'px',
        top: touch.clientY + 'px'
      }
      
      // 延迟显示触控提示
      setTimeout(() => {
        if (this.isTouching) {
          this.showTouchHint = true
        }
      }, this.touchHintDelay)
      
      // 长按检测
      this.longPressTimer = setTimeout(() => {
        if (this.isTouching) {
          this.handleLongPress()
        }
      }, this.longPressThreshold)
    },
    
    // 触控移动
    handleTouchMove(event) {
      if (!this.isTouching) return
      
      const touch = event.touches[0]
      this.touchCurrentPos = { x: touch.clientX, y: touch.clientY }
      
      const deltaX = this.touchCurrentPos.x - this.touchStartPos.x
      const deltaY = this.touchCurrentPos.y - this.touchStartPos.y
      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
      
      // 检测滑动
      if (distance > this.swipeThreshold) {
        this.isSwiping = true
        this.isLongPressing = false
        this.showLongPressPreview = false
        
        // 清除长按定时器
        if (this.longPressTimer) {
          clearTimeout(this.longPressTimer)
        }
        
        // 显示滑动指示器
        this.showSwipeIndicator = true
        this.swipeDirection = this.getSwipeDirection(deltaX, deltaY)
        this.swipeIndicatorStyle = {
          left: this.touchCurrentPos.x + 'px',
          top: this.touchCurrentPos.y + 'px',
          transform: `rotate(${Math.atan2(deltaY, deltaX) * 180 / Math.PI}deg)`
        }
      }
    },
    
    // 触控结束
    handleTouchEnd(event) {
      if (!this.isTouching) return
      
      const touchDuration = Date.now() - this.touchStartTime
      const deltaX = this.touchCurrentPos.x - this.touchStartPos.x
      const deltaY = this.touchCurrentPos.y - this.touchStartPos.y
      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
      
      // 清除定时器
      if (this.longPressTimer) {
        clearTimeout(this.longPressTimer)
      }
      
      // 处理不同的触控操作
      if (this.isSwiping) {
        this.handleSwipe(deltaX, deltaY, distance)
      } else if (this.isLongPressing) {
        this.handleLongPressEnd()
      } else if (touchDuration < this.longPressThreshold) {
        this.handleTap()
      }
      
      // 重置状态
      this.resetTouchState()
    },
    
    // 触控取消
    handleTouchCancel(event) {
      this.resetTouchState()
    },
    
    // 处理点击
    handleTap() {
      this.createRippleEffect()
      this.$emit('card-tap', {
        cardId: this.cardData.id,
        trustValue: this.trustValue
      })
    },
    
    // 处理长按
    handleLongPress() {
      this.isLongPressing = true
      this.showLongPressPreview = true
      this.previewStyle = {
        left: this.touchCurrentPos.x + 'px',
        top: this.touchCurrentPos.y + 'px'
      }
      
      // 创建长按效果
      this.createLongPressEffect()
    },
    
    // 处理长按结束
    handleLongPressEnd() {
      this.showLongPressPreview = false
      this.showTouchActions = true
      
      this.$emit('card-long-press', {
        cardId: this.cardData.id,
        trustValue: this.trustValue
      })
    },
    
    // 处理滑动
    handleSwipe(deltaX, deltaY, distance) {
      const direction = this.getSwipeDirection(deltaX, deltaY)
      this.swipeDirection = direction
      
      // 创建滑动效果
      this.createSwipeEffect(direction)
      
      this.$emit('card-swipe', {
        cardId: this.cardData.id,
        direction: direction,
        distance: distance,
        trustValue: this.trustValue
      })
    },
    
    // 获取滑动方向
    getSwipeDirection(deltaX, deltaY) {
      const absX = Math.abs(deltaX)
      const absY = Math.abs(deltaY)
      
      if (absX > absY) {
        return deltaX > 0 ? 'right' : 'left'
      } else {
        return deltaY > 0 ? 'down' : 'up'
      }
    },
    
    // 选择操作
    selectAction(action) {
      this.selectedAction = action
      
      this.$emit('action-selected', {
        cardId: this.cardData.id,
        action: action,
        trustValue: this.trustValue
      })
      
      // 延迟隐藏操作按钮
      setTimeout(() => {
        this.showTouchActions = false
        this.selectedAction = null
      }, 1000)
    },
    
    // 创建波纹效果
    createRippleEffect() {
      this.showRipple = true
      this.rippleStyle = {
        left: this.touchCurrentPos.x + 'px',
        top: this.touchCurrentPos.y + 'px'
      }
      
      setTimeout(() => {
        this.showRipple = false
      }, 600)
    },
    
    // 创建长按效果
    createLongPressEffect() {
      this.showLongPressEffect = true
      this.longPressStyle = {
        left: this.touchCurrentPos.x + 'px',
        top: this.touchCurrentPos.y + 'px'
      }
      
      setTimeout(() => {
        this.showLongPressEffect = false
      }, 1000)
    },
    
    // 创建滑动效果
    createSwipeEffect(direction) {
      this.showSwipeEffect = true
      this.swipeEffectStyle = {
        left: this.touchCurrentPos.x + 'px',
        top: this.touchCurrentPos.y + 'px',
        transform: `rotate(${this.getSwipeAngle(direction)}deg)`
      }
      
      setTimeout(() => {
        this.showSwipeEffect = false
      }, 800)
    },
    
    // 获取滑动角度
    getSwipeAngle(direction) {
      const angles = {
        right: 0,
        down: 90,
        left: 180,
        up: 270
      }
      return angles[direction] || 0
    },
    
    // 获取触控提示文本
    getTouchHintText() {
      if (this.trustValue >= 80) return '高度信任，点击查看详情'
      if (this.trustValue >= 50) return '一般信任，长按预览效果'
      if (this.trustValue >= 20) return '低度信任，滑动选择操作'
      return '信任破裂，需要修复'
    },
    
    // 获取滑动文本
    getSwipeText() {
      const texts = {
        right: '向右滑动选择信任',
        left: '向左滑动选择背叛',
        up: '向上滑动选择修复',
        down: '向下滑动查看详情'
      }
      return texts[this.swipeDirection] || '滑动选择操作'
    },
    
    // 获取滑动箭头
    getSwipeArrow() {
      const arrows = {
        right: '→',
        left: '←',
        up: '↑',
        down: '↓'
      }
      return arrows[this.swipeDirection] || '→'
    },
    
    // 获取信任等级文本
    getTrustLevelText() {
      const levels = {
        high: '高度信任',
        medium: '一般信任',
        low: '低度信任',
        broken: '信任破裂'
      }
      return levels[this.trustLevel] || '未知'
    },
    
    // 重置触控状态
    resetTouchState() {
      this.isTouching = false
      this.isLongPressing = false
      this.isSwiping = false
      this.showTouchHint = false
      this.showLongPressPreview = false
      this.showSwipeIndicator = false
      this.showRipple = false
      this.showLongPressEffect = false
      this.showSwipeEffect = false
      this.swipeDirection = null
    }
  }
}
</script>

<style scoped>
.trust-touch-card {
  position: relative;
  background: white;
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 信任状态样式 */
.trust-touch-card.trust-high {
  border: 3rpx solid #4caf50;
  background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
}

.trust-touch-card.trust-medium {
  border: 3rpx solid #ff9800;
  background: linear-gradient(135deg, #fff8f0 0%, #ffe6cc 100%);
}

.trust-touch-card.trust-low {
  border: 3rpx solid #ff5722;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
}

.trust-touch-card.trust-broken {
  border: 3rpx solid #f44336;
  background: linear-gradient(135deg, #fafafa 0%, #e0e0e0 100%);
  filter: grayscale(0.3);
}

/* 触控状态样式 */
.trust-touch-card.touching {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.trust-touch-card.long-pressing {
  transform: scale(1.02);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
}

.trust-touch-card.swiping {
  transform: scale(0.95);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.25);
}

/* 卡牌背景 */
.card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.background-pattern {
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-size: 40rpx 40rpx;
  background-repeat: repeat;
}

.background-pattern.high {
  background-image: radial-gradient(circle, #4caf50 2rpx, transparent 2rpx);
}

.background-pattern.medium {
  background-image: radial-gradient(circle, #ff9800 2rpx, transparent 2rpx);
}

.background-pattern.low {
  background-image: radial-gradient(circle, #ff5722 2rpx, transparent 2rpx);
}

.background-pattern.broken {
  background-image: radial-gradient(circle, #f44336 2rpx, transparent 2rpx);
}

/* 触控反馈层 */
.touch-feedback-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* 触控提示 */
.touch-hint {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
  font-size: 18rpx;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  animation: touchHintFade 0.3s ease-out;
}

.hint-text {
  font-size: 16rpx;
}

/* 长按预览 */
.long-press-preview {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12rpx;
  padding: 16rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -100%);
  animation: previewSlide 0.3s ease-out;
  min-width: 200rpx;
}

.preview-content {
  text-align: center;
}

.preview-title {
  font-size: 20rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.preview-effects {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.preview-effect {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 4rpx 8rpx;
  background: #f8f9fa;
  border-radius: 6rpx;
}

.effect-icon {
  font-size: 16rpx;
}

.effect-text {
  font-size: 16rpx;
  color: #333;
}

/* 滑动指示器 */
.swipe-indicator {
  position: absolute;
  background: rgba(102, 126, 234, 0.9);
  color: white;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
  font-size: 18rpx;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: swipeIndicatorPulse 0.5s ease-in-out infinite;
}

.swipe-text {
  font-size: 16rpx;
  margin-right: 8rpx;
}

.swipe-arrow {
  font-size: 20rpx;
  font-weight: bold;
}

/* 卡牌内容 */
.card-content {
  position: relative;
  z-index: 3;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.card-name {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.trust-badge {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.trust-badge.high {
  background: #4caf50;
  color: white;
}

.trust-badge.medium {
  background: #ff9800;
  color: white;
}

.trust-badge.low {
  background: #ff5722;
  color: white;
}

.trust-badge.broken {
  background: #f44336;
  color: white;
}

.badge-text {
  font-size: 18rpx;
}

/* 信任进度条 */
.trust-progress {
  margin-bottom: 20rpx;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.label-text {
  font-size: 24rpx;
  color: #666;
  font-weight: bold;
}

.value-text {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
  background: #e0e0e0;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.5s ease;
}

.progress-fill.high {
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  box-shadow: 0 0 8rpx rgba(76, 175, 80, 0.3);
}

.progress-fill.medium {
  background: linear-gradient(90deg, #ff9800, #ffc107);
  box-shadow: 0 0 8rpx rgba(255, 152, 0, 0.3);
}

.progress-fill.low {
  background: linear-gradient(90deg, #ff5722, #ff7043);
  box-shadow: 0 0 8rpx rgba(255, 87, 34, 0.3);
}

.progress-fill.broken {
  background: linear-gradient(90deg, #f44336, #e57373);
  box-shadow: 0 0 8rpx rgba(244, 67, 54, 0.3);
}

/* 信任效果 */
.trust-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.effect-item {
  display: flex;
  align-items: center;
  padding: 6rpx 12rpx;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8rpx;
  font-size: 20rpx;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.effect-item.active {
  background: rgba(76, 175, 80, 0.1);
  opacity: 1;
  color: #4caf50;
  font-weight: bold;
}

.effect-icon {
  margin-right: 4rpx;
  font-size: 18rpx;
}

.effect-text {
  font-size: 18rpx;
}

/* 触控操作区域 */
.touch-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  animation: actionsFadeIn 0.3s ease-out;
}

.action-buttons {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;
  justify-content: center;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 20rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80rpx;
}

.action-btn.trust {
  background: #4caf50;
  color: white;
}

.action-btn.betray {
  background: #f44336;
  color: white;
}

.action-btn.repair {
  background: #ff9800;
  color: white;
}

.action-btn.active {
  transform: scale(1.1);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
}

.btn-icon {
  font-size: 24rpx;
  margin-bottom: 4rpx;
}

.btn-text {
  font-size: 16rpx;
}

/* 触控反馈效果 */
.touch-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* 波纹效果 */
.ripple-effect {
  position: absolute;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.3);
  transform: translate(-50%, -50%);
  animation: rippleExpand 0.6s ease-out;
}

/* 长按效果 */
.long-press-effect {
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: rgba(255, 152, 0, 0.2);
  transform: translate(-50%, -50%);
  animation: longPressPulse 1s ease-in-out infinite;
}

/* 滑动效果 */
.swipe-effect {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.3);
  transform: translate(-50%, -50%);
  animation: swipeExpand 0.8s ease-out;
}

/* 动画效果 */
@keyframes touchHintFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
}

@keyframes previewSlide {
  0% {
    opacity: 0;
    transform: translate(-50%, -100%) translateY(20rpx);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(0);
  }
}

@keyframes swipeIndicatorPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes actionsFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes longPressPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
}

@keyframes swipeExpand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .trust-touch-card {
    margin: 12rpx;
    padding: 20rpx;
  }
  
  .card-name {
    font-size: 26rpx;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 12rpx;
  }
  
  .action-btn {
    min-width: 120rpx;
  }
}
</style>

